<template>
	<div class="navigator-wrap">
		<block v-for="(item,index) in tabList" :key="index">
			<view :style="[currentTabIndex == index ? {'backgroundColor': backgroundColor} : {'color': color}]" class="navigator-item" :class="currentTabIndex == index ? 'on' : ''" @click="switchTab(index)">
				<view class="icon">
					<span class="icon iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': activeColor} : {'color': color}]"
					 v-html="item.icon"></span>
				</view>
				<view :style="[currentTabIndex == index ? {'color': activeColor} : {'color': color}]" class="text">{{item.text}}</view>
			</view>
		</block>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentTabIndex: this.current
			}
		},
		watch: {
			$route() {
				if (this.$route.path === "/") {
					this.currentTabIndex = 0;
				}
			}
		},
		props: {
			tabList: {
				type: Array,
				default () {
					return [{
							icon: '&#xe600;',
							text: 'tab1',
						},
						{
							icon: '&#xe600;',
							text: 'tab2',
						},
						{
							icon: '&#xe600;',
							text: 'tab3',
						}
					]
				}
			},
			current: {
				type: [Number, String],
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#cb834d'
			},
			color: {
				type: String,
				default: '#999'
			},
			activeColor: {
				type: String,
				default: '#ffffff'
			}
		},
		methods: {
			switchTab(index) {
				this.currentTabIndex = index
				this.$emit('click', index)
			}
		},
	}
</script>

<style lang="scss">
	.navigator-wrap {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		.navigator-item {
			position: relative;
			font-size: .5rem;
			padding: .2rem .4rem;
			margin: .2rem 0;
			background-color: #FFFFFF;
			color: red;
			display: flex;
			align-items: center;
			border-radius: 12px;
			.icon{
				font-size: 1.2rem;
			}
		}
	}
</style>
